<template>
  <div class="form">
    <div class="w-full sm:flex justify-center">
      <form :action="actionUrl"
        class="w-full flex-1">
        <label for="email"
          class="sr-only">{{placeholder ? placeholder : $t('searchAIToolsByKeyword')}}</label>
        <div class="relative">
          <template v-for="(item, key) in $route.query">
            <input type="hidden"
              :name="key"
              :key="key"
              :value="$route.query[key]"
              v-if="key!=='keyword'" />
          </template>
          <input type="text"
            name="keyword"
            v-model="keyword"
            :placeholder="placeholder ? placeholder : $t('searchAIToolsByKeyword')"
            class="search-ipt block w-full px-5 border border-white text-base text-gray-900 placeholder-gray-1900 border-transparent hover:border-purple-1300 focus:border-purple-1300 focus:outline-none" />
          <div class="absolute inset-y-0 right-5 flex items-center cursor-pointer to-search"
            @click="toSearh">
            <svg-icon className="text-xl"
              iconName='search'></svg-icon>
          </div>

          <input type="submit"
            class="absolute inset-y-0 right-5 flex items-center cursor-pointer submitBtn">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tools',
  props: {
    placeholder: {
      type: String | null,
      default: null,
    },
  },
  data() {
    return {
      keyword: null,
      actionUrl: this.$route.fullPath,
    }
  },
  created() {
    this.keyword = this.$route.query.keyword
  },
  methods: {
    toSearh() {
      let query = {
        ...this.$route.query,
        keyword: this.keyword,
      }

      for (let key in query) {
        if (query[key] === null || query[key] === '') {
          delete query[key]
        }
      }

      this.$router.push({
        name: this.$route.name,
        query: query,
      })
    },
  },
}
</script>
<style lang='scss' scoped>
.form {
  font-size: 0;
  .search-ipt {
    height: 58px;
    border-radius: 29px;
  }
}
</style>
